<template>
  <div class="wifiManage height_100">
    <page-model :title="title">
        <desc-title  :descTitle="descTitle"></desc-title>
        <el-form :model="wifiList" :rules="rules" ref="wifiList" label-width="300px">
          <el-form-item label="信号图：" prop="lightUrl" placeholder="请添加信号图">
            <el-upload
              class="avatar-uploader"
              :action="uploadImg"
              ref="elUpload"
              list-type="picture-card"
              :before-upload="beforeUpload"
              :on-success="onsuccessUpload"
              :with-credentials="true"
              :headers="headOfRequest"
              :show-file-list="false"
            >
              <div class="nopic flex-column">
                <img v-if="wifiList.lightUrl" :src="wifiList.lightUrl" width="100%" height="100%" />
                <img v-if="!wifiList.lightUrl" src="@/assets/file/addPic.png" alt width="48px" />
                <div v-if="!wifiList.lightUrl" class="addpics">添加图片</div>
              </div>
              <span class="pictips">*图片大小小于3M</span>
            </el-upload>
          </el-form-item>
        </el-form>
        <div class="header">
          <desc-title  :descTitle="'5GWIFI信号强度列表'" :desBtnName="'添加'" @desEvent="addRow"></desc-title>
        </div>
        <div class="tableList pl-30 pr-30">
          <table border="0" cellspacing="0" cellpadding="0" class="table">
            <thead class="thead">
              <th>序号</th>
              <th>SSID</th>
              <th>DEVlCE</th>
              <th>RSSl</th>
              <th>FREQUENCY</th>
              <th>CHANNEL</th>
              <th>操作</th>
            </thead>
            <tbody class="tbody">
              <tr v-for="(item,index) in tableList" :key="item.lightId">
                <td>{{index+1}}</td>
                <td>
                  <el-input v-model="item.ssid" type="text" placeholder="请输入数据"></el-input>
                </td>
                <td>
                  <el-input v-model="item.device" type="text" placeholder="请输入数据"></el-input>
                </td>
                <td>
                  <el-input v-model="item.rssi" type="text" placeholder="请输入数据"></el-input>
                </td>
                <td>
                  <el-input v-model="item.frequency" type="text" placeholder="请输入数据"></el-input>
                </td>
                <td>
                  <el-input v-model="item.channe" type="text" placeholder="请输入数据"></el-input>
                </td>
                <td>
                  <el-button @click="deleteRow(index)" v-if="item.lightId !== firstId" type="text" size="small">删除</el-button>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="block" v-show="total">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="10"
              layout="total, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
          <div class="empty" v-show="!total">
            <span>暂无数据</span>
          </div>
        </div>
        <div class="addBtn  pb-30">
          <span class="confirm flex-center" @click="confirmAdd">保存</span>
        </div>
    </page-model>
  </div>
</template>

<script>
import { getToken } from '@/utils/token'
import { uploadImg } from '@/api/file'
import { saveWifi } from '@/api/innerProject/5gNetManage'
export default {
  data () {
    return {
      firstId: '',
      lightUrl: '',
      tableList: [],
      headOfRequest: { token: getToken() },
      uploadImg: uploadImg,
      title: '5GWIFI管理',
      descTitle: '5GWIFI信号图谱',
      wifiList: {
        lightUrl: ''
      },
      rules: {
        lightUrl: [
          { required: true, message: '请添加信号图', trigger: 'change' }
        ]
      },
      pageIndex: 1,
      currentPage: 1,
      // tbLightList: [],
      // tableList: [],
      total: 0,
      save5GBaseDTO: {
        projectId: '',
        tbLightList: [
          {
            channe: '',
            createTime: '',
            device: '',
            frequency: '',
            isValid: '',
            lightId: '',
            lightUrl: '',
            projectId: '',
            rssi: '',
            ssid: '',
            updateTime: ''
          }
        ],
        tbPointList: [
          {
            createTime: '',
            file1: '',
            file2: '',
            file3: '',
            file4: '',
            file5: '',
            file6: '',
            file7: '',
            file8: '',
            isValid: '',
            pointAd: '',
            pointId: '',
            projectId: '',
            updateTime: ''
          }
        ]
      }
    }
  },
  methods: {
    // 图片上传之前的钩子
    beforeUpload (file) {
      if (file.type.indexOf('image') !== -1) {
        const testmsg = /^image\/(jpg|JPG|jpeg|png|PNG|bmp|BMP)$/.test(
          file.type
        )
        const isLT3M = file.size / 1024 / 1024 <= 3
        if (!testmsg) {
          this.$message.error('图片格式错误')
          return false
        }
        if (!isLT3M) {
          this.$message.error('上传图片大小不能超过3M!')
          return false
        }
        return testmsg && isLT3M
      }
    },
    // 上传成功的钩子
    onsuccessUpload (res, file) {
      // console.log(file)
      this.wifiList.lightUrl = file.url
      this.lightUrl = file.response.data.id
    },
    onError (err) {
      this.$message.error(err.message || '上传失败')
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.tableList = this.tbLightList.slice(10 * (this.currentPage - 1), 10 * this.currentPage)
    },
    async getTable () {
      await this.$store.dispatch('wifiManage/getWifiList').then(async res => {
        if (res.data.code === 200 && res.data.data.length) {
          this.tbLightList = res.data.data
          this.firstId = this.tbLightList[0].lightId
          // console.log(this.firstId)
          this.tableList = this.tbLightList.slice(0, 10)
          this.wifiList.lightUrl = this.tableList[0].lightUrl ? await this.$_makeMediaSrc(this.tableList[0].lightUrl) : ''
          this.lightUrl = this.tableList[0].lightUrl
          this.total = res.data.data.length
        }
      })
    },
    addRow () {
      const len = this.tableList.length
      if (len && (len % 10 === 0)) {
        this.currentPage += 1
        this.tableList = this.tbLightList.slice(10 * (this.currentPage - 1), 10 * this.currentPage)
      }
      this.add()
    },
    // 添加行
    add () {
      const list = {
        index: '',
        ssid: this.ssid,
        device: this.device,
        rssi: this.rssi,
        frequency: this.frequency,
        channe: this.channe,
        operate: this.operate
      }
      if (!this.tbLightList.length) {
        list.lightId = 666
        this.firstId = list.lightId
      }
      this.tableList.push(list)
      // console.log(this.tableList)
      this.tbLightList.push(list)
      this.total += 1
    },
    // 删除行
    deleteRow (index) {
      this.tbLightList.splice((10 * (this.currentPage - 1)) + index, 1)
      this.tableList = this.tbLightList.slice(10 * (this.currentPage - 1), 10 * this.currentPage)
      if (this.tableList.length === 0) {
        this.currentPage -= 1
        this.tableList = this.tbLightList.slice(10 * (this.currentPage - 1), 10 * this.currentPage)
      }
      this.total -= 1
    },
    confirmAdd () {
      this.tbLightList.map((item) => {
        item.lightUrl = this.lightUrl
        return item
      })
      this.save5GBaseDTO.tbLightList = this.tbLightList
      // console.log('this.save5GBaseDTO', this.save5GBaseDTO)
      this.save5GBaseDTO.projectId = localStorage.getItem('projectId')
      saveWifi(this.save5GBaseDTO).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 500
          })
        }
      })
    }
  },
  created () {
    this.getTable()
  },
  computed: {
    tbLightList: {
      get () {
        return this.$store.state.wifiManage.wifiList
      },
      set (val) {
        this.$store.state.wifiManage.wifiList = val
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .header {
    font-size: 14px;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    span {
      margin-left: 30px;
      margin-top: 34px;
      float: left;
      height: 18px;
      width: 4px;
      background-color: #4868ff;
    }
    p {
      margin-top: 30px;
      margin-left: 10px;
      float: left;
      height: 18px;
      font-size: 18px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    .el-button {
      margin-top: 30px;
      width: 84px;
      height: 36px;
      background: rgba(72, 104, 255, 1);
      border-radius: 18px;
      color: rgba(255, 255, 255, 1);
      float: right;
    }
  }
  ::v-deep .el-form {
    background-color: #fff;
    .el-input {
      width: 400px;
    }
    .el-textarea {
      width: 560px;
      height: 170px;
      .el-textarea__inner {
        height: 100%;
      }
    }
    .el-form-item{
      margin-bottom: 0;
    }
    .el-form-item__label {
      width: 300px !important;
      text-align: right;
    }
    .el-form-item__error {
      padding-left: 168px;
    }
    .el-form-item.is-required:not(.is-no-asterisk)
      > .el-form-item__label:before {
      content: "*";
      color: #4868ff;
      margin-right: 4px;
    }
  }
  ::v-deep .el-upload--picture-card {
    width: 390px;
    height: 220px;
    background-color: #fff;
    .nopic {
      height: 100%;
      align-items: center;
      justify-content: center;
      position: relative;
      .addpics {
        line-height: 20px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(200, 200, 200, 1);
      }
    }
    .pictips {
      line-height: 20px;
      position: absolute;
      top: 0;
      left: 720px;
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 180, 21, 1);
      cursor: default;
    }
    .el-progress-circle {
      width: 40px !important;
      height: 40px !important;
    }
  }
  .tableList {
    min-height: calc(92.5% - 464px);
    background-color: #fff;
    .table {
      width: 100%;
      .thead {
        background: rgba(87, 131, 255, 0.05);
        font-size: 14px;
        font-weight: 500;
        th {
          height: 60px;
          line-height: 60px;
          text-align: left;
          padding-left: 24px;
          border-bottom: 1px solid #e6e6e6;
          font-size: 14px;
        }
      }
      .tbody {
        height: calc(100% - 60px);
        tr {
          height: 64px;
          td {
            max-width: 200px;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
            padding-left: 24px;
            border-bottom: rgba(242, 242, 242, 1) 1px solid;
            font-size: 0.11667rem;
            .el-input {
              width: 200px;
            }
          }
          .el-button {
            color: #ff2b2b;
            text-decoration: underline;
            font-weight: 500;
            font-size: 14px;
          }
        }
      }
    }
    .block {
      padding: 24px 0;
      margin-right: 28px;
      overflow: hidden;
      ::v-deep .el-pagination {
        float: right;
      }
    }
    .empty {
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      padding: 22px 0;
    }
  }
  .addBtn {
    padding-left: 300px;
    background-color: #fff;
    .confirm {
      width: 172px;
      height: 48px;
      background: rgba(72, 104, 255, 1);
      border-radius: 24px;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }
  }
</style>
